<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('可拖拽节点')}`">{{ $t('可拖拽节点') }}</t>
            <li>
                通过<span class="d-code">draggable</span>属性可让节点变为可拖拽
            </li>
            <li>
                你可以使用<span class="d-code">allow-drag</span>属性判断节点能否被拖拽，该属性的类型为
                <span class="s-code">Function</span>，参数为当前节点
                <span class="s-code">node</span>
                如果返回<span class="s-code">false</span>，则节点不能被拖动
            </li>
            <li>
                同样地，你也可以通过<span class="d-code">allow-drop</span>在拖拽时判定目标节点能否成为拖动目标位置，
                该属性的类型也是<span class="s-code">Function</span>，参数为
                <span class="s-code">(draggingNode, dropNode, type)</span>
                如果返回<span class="s-code">false</span>，则拖动的节点不能被拖放到目标节点内
            </li>
            <li>
                组件内部提供了默认插槽，你可以通过默认插槽自定义节点内容，
                插槽参数为<span class="s-code">node</span>和<span class="s-code">data</span>
            </li>
        </template>
        <sib-tree
            draggable
            default-expand-all
            style="height: 500px;"
            :props="props"
            :allow-drag="allowDrag"
            :allow-drop="allowDrop"
            :show-checkbox="showCheckbox"
            :data="dataSource">
            <template #default="{ node, data }">
                <div class="example-custom-tree-node">
                    <span>{{ node.label }}</span>
                    <span>
                        <a @click="append(data)"> Append </a>
                        <a style="margin-left: 8px" @click="remove(node, data)"> Delete </a>
                    </span>
                </div>
            </template>
        </sib-tree>
    </example>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const dataSource = ref([
            {
                id: 2,
                label: 'Level one 2',
                children: [
                    {
                        id: 5,
                        label: 'Level two 2-1',
                    },
                    {
                        id: 6,
                        label: 'Level two 2-2',
                    },
                ],
            },
            {
                id: 3,
                label: 'Level one 3',
                children: [
                    {
                        id: 7,
                        label: 'Level two 3-1',
                    },
                    {
                        id: 8,
                        label: 'Level two 3-2',
                    },
                ],
            },
        ]);

        return {
            dataSource,
            props: {
                label: 'label',
            },
            allowDrag(node) {
                console.log('node: ', node);
                return true;
            },
            allowDrop(draggingNode, dropNode, type) {
                console.log(draggingNode, dropNode, type);
                return true;
            },
            append(data) {
                const newChild = { id: Math.random().toString().slice(2), label: 'testtest', children: [] };
                if (!data.children) data.children = [];
                data.children.push(newChild);
                dataSource.value = [...dataSource.value];
            },
            remove(node, data) {
                const { parent } = node;
                const children = parent.data.children || parent.data;
                const index = children.findIndex((d) => d.id === data.id);
                children.splice(index, 1);
                dataSource.value = [...dataSource.value];
            },
            templateString: `<template>
    <div class="example-box">
        <sib-tree
            draggable
            default-expand-all
            style="height: 500px;"
            :props="props"
            :allow-drag="allowDrag"
            :allow-drop="allowDrop"
            :show-checkbox="showCheckbox"
            :data="dataSource">
            <template #default="{ node, data }">
                <div class="example-custom-tree-node">
                    <span>{{ node.label }}</span>
                    <span>
                        <a @click="append(data)"> Append </a>
                        <a style="margin-left: 8px" @click="remove(node, data)"> Delete </a>
                    </span>
                </div>
            </template>
        </sib-tree>
    </div>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const dataSource = ref([
            {
                id: 2,
                label: 'Level one 2',
                children: [
                    {
                        id: 5,
                        label: 'Level two 2-1',
                    },
                    {
                        id: 6,
                        label: 'Level two 2-2',
                    },
                ],
            },
            {
                id: 3,
                label: 'Level one 3',
                children: [
                    {
                        id: 7,
                        label: 'Level two 3-1',
                    },
                    {
                        id: 8,
                        label: 'Level two 3-2',
                    },
                ],
            },
        ]);

        return {
            dataSource,
            props: {
                label: 'label',
            },
            allowDrag(node) {
                console.log('node: ', node);
                return true;
            },
            allowDrop(draggingNode, dropNode, type) {
                console.log(draggingNode, dropNode, type);
                return true;
            },
            append(data) {
                const newChild = { id: Math.random().toString().slice(2), label: 'testtest', children: [] };
                if (!data.children) data.children = [];
                data.children.push(newChild);
                dataSource.value = [...dataSource.value];
            },
            remove(node, data) {
                const { parent } = node;
                const children = parent.data.children || parent.data;
                const index = children.findIndex((d) => d.id === data.id);
                children.splice(index, 1);
                dataSource.value = [...dataSource.value];
            },
        };
    },
};
<\/script>`,
        };
    },
};
</script>

<style lang="scss">
    .example-custom-tree-node {
        width: 100%;
        padding-right: 20px;
        display: flex;
        justify-content: space-between;
    }
</style>
